<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>详情</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
			}

			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				background-color: #f5f5f5;
				color: #333;
				line-height: 1.5;
			}

			/* 头部导航 */
			.header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 44px;
				background: white;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15px;
				border-bottom: 1px solid #eee;
				z-index: 100;
			}

			.back-btn,
			.share-btn {
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				color: #666;
			}

			.title {
				font-size: 16px;
				font-weight: 600;
			}

			/* 内容区域 */
			.container {
				margin-top: 44px;
				margin-bottom: 60px;
			}

			/* 商品图片轮播 */
			.image-slider {
				position: relative;
				height: 375px;
				overflow: hidden;
				background: white;
			}

			.slider-track {
				display: flex;
				height: 100%;
				transition: transform 0.3s ease;
			}

			.slider-item {
				min-width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.slider-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.slider-indicators {
				position: absolute;
				bottom: 15px;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				gap: 6px;
			}

			.indicator {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.5);
				transition: all 0.3s;
			}

			.indicator.active {
				background: white;
				transform: scale(1.2);
			}

			/* 商品信息 */
			.product-info {
				background: white;
				padding: 15px;
				margin-bottom: 10px;
			}

			.price-section {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}

			.current-price {
				font-size: 24px;
				font-weight: bold;
				color: #ff4444;
			}

			.original-price {
				font-size: 14px;
				color: #999;
				text-decoration: line-through;
				margin-left: 10px;
			}

			.discount {
				background: #ff4444;
				color: white;
				font-size: 12px;
				padding: 2px 6px;
				border-radius: 10px;
				margin-left: 10px;
			}

			.product-title {
				font-size: 16px;
				line-height: 1.4;
				margin-bottom: 8px;
			}

			.product-desc {
				font-size: 14px;
				color: #666;
				margin-bottom: 10px;
			}

			.sales-info {
				display: flex;
				font-size: 12px;
				color: #999;
			}

			.sales-info span {
				margin-right: 15px;
			}

			/* 服务保障 */
			.service-guarantee {
				background: white;
				padding: 10px 15px;
				margin-bottom: 10px;
				display: flex;
				font-size: 12px;
				color: #666;
			}

			.service-item {
				display: flex;
				align-items: center;
				margin-right: 15px;
			}

			.service-item i {
				color: #ff4444;
				margin-right: 3px;
			}

			/* 规格选择 */
			.spec-section {
				background: white;
				padding: 15px;
				margin-bottom: 10px;
			}

			.section-title {
				font-size: 14px;
				color: #666;
				margin-bottom: 10px;
			}

			.spec-options {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
			}

			.spec-option {
				padding: 8px 15px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 14px;
				background: #f8f8f8;
			}

			.spec-option.selected {
				border-color: #ff4444;
				color: #ff4444;
				background: #fff0f0;
			}

			/* 商品详情 */
			.product-detail {
				background: white;
				padding: 15px;
				margin-bottom: 10px;
			}

			.detail-tabs {
				display: flex;
				border-bottom: 1px solid #eee;
				margin-bottom: 15px;
			}

			.tab {
				padding: 10px 0;
				margin-right: 20px;
				font-size: 14px;
				position: relative;
			}

			.tab.active {
				color: #ff4444;
				font-weight: 500;
			}

			.tab.active::after {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 0;
				width: 100%;
				height: 2px;
				background: #ff4444;
			}

			.detail-content {
				min-height: 200px;
			}

			.detail-image {
				width: 100%;
				margin-bottom: 10px;
			}

			/* 底部操作栏 */
			.footer-bar {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50px;
				background: white;
				display: flex;
				border-top: 1px solid #eee;
				z-index: 100;
			}

			.footer-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 50px;
				font-size: 10px;
				color: #666;
			}

			.footer-btn i {
				font-size: 18px;
				margin-bottom: 2px;
			}

			.action-btns {
				display: flex;
				flex: 1;
			}

			.add-cart,
			.buy-now {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				color: white;
				border: none;
			}

			.add-cart {
				background: #ff9500;
			}

			.buy-now {
				background: #ff4444;
			}

			/* 规格选择弹窗 */
			.spec-modal {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background: white;
				border-radius: 10px 10px 0 0;
				transform: translateY(100%);
				transition: transform 0.3s ease;
				z-index: 200;
			}

			.spec-modal.active {
				transform: translateY(0);
			}

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px;
				border-bottom: 1px solid #eee;
			}

			.modal-title {
				font-size: 16px;
				font-weight: 500;
			}

			.close-modal {
				font-size: 20px;
				color: #999;
				background: none;
				border: none;
			}

			.modal-content {
				padding: 15px;
				max-height: 60vh;
				overflow-y: auto;
			}

			.modal-footer {
				padding: 15px;
				display: flex;
				gap: 10px;
			}

			.modal-footer .add-cart,
			.modal-footer .buy-now {
				height: 44px;
				border-radius: 4px;
			}

			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				display: none;
				z-index: 150;
			}

			.overlay.active {
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- 头部导航 -->
		<div class="header">
			<div class="back-btn" onclick="goBack()">←</div>
			<div class="title">商品详情</div>
			<div class="share-btn" onclick="shareProduct()">⋮</div>
		</div>

		<!-- 内容区域 -->
		<div class="container">
			<!-- 商品图片轮播 -->
			<div class="image-slider">
				<div class="slider-track" id="sliderTrack">
					<div class="slider-item">
						<img src="https://via.placeholder.com/375x375/FF6B6B/FFFFFF?text=商品主图1" alt="商品图片">
					</div>
					<div class="slider-item">
						<img src="https://via.placeholder.com/375x375/4ECDC4/FFFFFF?text=商品主图2" alt="商品图片">
					</div>
					<div class="slider-item">
						<img src="https://via.placeholder.com/375x375/45B7D1/FFFFFF?text=商品主图3" alt="商品图片">
					</div>
				</div>
				<div class="slider-indicators" id="sliderIndicators">
					<div class="indicator active"></div>
					<div class="indicator"></div>
					<div class="indicator"></div>
				</div>
			</div>

			<!-- 商品信息 -->
			<div class="product-info">
				<div class="price-section">
					<div class="current-price">¥299.00</div>
					<div class="original-price">¥399.00</div>
					<div class="discount">7.5折</div>
				</div>
				<h1 class="product-title">2023新款轻薄笔记本电脑 超薄便携 高性能商务办公学生游戏本</h1>
				<p class="product-desc">13代英特尔酷睿i5处理器 / 16GB内存 / 512GB固态硬盘 / 14英寸2.5K全面屏</p>
				<div class="sales-info">
					<span>销量: 2589件</span>
					<span>收藏: 1286人</span>
					<span>评价: 4.9分</span>
				</div>
			</div>

			<!-- 服务保障 -->
			<div class="service-guarantee">
				<div class="service-item">
					<i>✓</i> 七天无理由退货
				</div>
				<div class="service-item">
					<i>✓</i> 48小时发货
				</div>
				<div class="service-item">
					<i>✓</i> 全国联保
				</div>
			</div>

			<!-- 规格选择 -->
			<div class="spec-section" onclick="showSpecModal()">
				<div class="section-title">选择规格</div>
				<div class="spec-options">
					<div class="spec-option">i5/16G/512G 深空灰</div>
					<div class="spec-option">i7/16G/1T 深空灰</div>
					<div class="spec-option">i7/32G/1T 银色</div>
				</div>
			</div>

			<!-- 商品详情 -->
			<div class="product-detail">
				<div class="detail-tabs">
					<div class="tab active" onclick="switchTab(0)">商品详情</div>
					<div class="tab" onclick="switchTab(1)">规格参数</div>
					<div class="tab" onclick="switchTab(2)">用户评价(1286)</div>
				</div>
				<div class="detail-content">
					<img src="https://via.placeholder.com/375x800/F7FFF7/333333?text=商品详情图1" alt="商品详情"
						class="detail-image">
					<img src="https://via.placeholder.com/375x800/E2F0F7/333333?text=商品详情图2" alt="商品详情"
						class="detail-image">
					<img src="https://via.placeholder.com/375x800/FFF2E0/333333?text=商品详情图3" alt="商品详情"
						class="detail-image">
				</div>
			</div>
		</div>

		<!-- 底部操作栏 -->
		<div class="footer-bar">
			<div class="footer-btn">
				<i>♡</i>
				<span>收藏</span>
			</div>
			<div class="footer-btn">
				<i>🛒</i>
				<span>购物车</span>
			</div>
			<div class="footer-btn">
				<i>👨</i>
				<span>客服</span>
			</div>
			<div class="action-btns">
				<button class="add-cart" onclick="showSpecModal()">加入购物车</button>
				<button class="buy-now" onclick="showSpecModal()">立即购买</button>
			</div>
		</div>

		<!-- 规格选择弹窗 -->
		<div class="overlay" id="overlay" onclick="hideSpecModal()"></div>
		<div class="spec-modal" id="specModal">
			<div class="modal-header">
				<div class="modal-title">选择规格</div>
				<button class="close-modal" onclick="hideSpecModal()">×</button>
			</div>
			<div class="modal-content">
				<div class="spec-section">
					<div class="section-title">颜色</div>
					<div class="spec-options">
						<div class="spec-option" onclick="selectSpec(this)">深空灰</div>
						<div class="spec-option" onclick="selectSpec(this)">银色</div>
						<div class="spec-option" onclick="selectSpec(this)">玫瑰金</div>
					</div>
				</div>
				<div class="spec-section">
					<div class="section-title">配置</div>
					<div class="spec-options">
						<div class="spec-option" onclick="selectSpec(this)">i5/16G/512G</div>
						<div class="spec-option" onclick="selectSpec(this)">i7/16G/1T</div>
						<div class="spec-option" onclick="selectSpec(this)">i7/32G/1T</div>
					</div>
				</div>
				<div class="spec-section">
					<div class="section-title">数量</div>
					<div class="quantity-selector">
						<button onclick="changeQuantity(-1)">-</button>
						<input type="number" value="1" min="1" max="99" id="quantityInput">
						<button onclick="changeQuantity(1)">+</button>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="add-cart" onclick="addToCart()">加入购物车</button>
				<button class="buy-now" onclick="buyNow()">立即购买</button>
			</div>
		</div>

		<script>
			// 商品数据
			const productData = {
				id: '1001',
				name: '2023新款轻薄笔记本电脑',
				price: 299.00,
				originalPrice: 399.00,
				discount: 0.75,
				sales: 2589,
				favorites: 1286,
				rating: 4.9,
				images: [
					'https://via.placeholder.com/375x375/FF6B6B/FFFFFF?text=商品主图1',
					'https://via.placeholder.com/375x375/4ECDC4/FFFFFF?text=商品主图2',
					'https://via.placeholder.com/375x375/45B7D1/FFFFFF?text=商品主图3'
				],
				details: [
					'https://via.placeholder.com/375x800/F7FFF7/333333?text=商品详情图1',
					'https://via.placeholder.com/375x800/E2F0F7/333333?text=商品详情图2',
					'https://via.placeholder.com/375x800/FFF2E0/333333?text=商品详情图3'
				],
				colors: ['深空灰', '银色', '玫瑰金'],
				specs: ['i5/16G/512G', 'i7/16G/1T', 'i7/32G/1T']
			};

			// 图片轮播功能
			let currentSlide = 0;
			const sliderTrack = document.getElementById('sliderTrack');
			const indicators = document.querySelectorAll('.indicator');

			// 初始化轮播
			function initSlider() {
				updateSlider();

				// 自动轮播
				setInterval(() => {
					currentSlide = (currentSlide + 1) % productData.images.length;
					updateSlider();
				}, 4000);

				// 触摸滑动
				let startX = 0;
				let currentX = 0;
				let isDragging = false;

				sliderTrack.addEventListener('touchstart', (e) => {
					startX = e.touches[0].clientX;
					currentX = startX;
					isDragging = true;
					sliderTrack.style.transition = 'none';
				});

				sliderTrack.addEventListener('touchmove', (e) => {
					if (!isDragging) return;
					e.preventDefault();

					currentX = e.touches[0].clientX;
					const diff = currentX - startX;

					// 限制滑动范围
					if ((currentSlide === 0 && diff > 0) || (currentSlide === productData.images.length - 1 && diff <
						0)) {
						return;
					}

					const translateX = -currentSlide * 100 + (diff / sliderTrack.offsetWidth) * 100;
					sliderTrack.style.transform = `translateX(${translateX}%)`;
				});

				sliderTrack.addEventListener('touchend', () => {
					if (!isDragging) return;
					isDragging = false;

					const diff = currentX - startX;
					const threshold = 50; // 滑动阈值

					if (Math.abs(diff) > threshold) {
						if (diff > 0 && currentSlide > 0) {
							// 向右滑动，上一页
							currentSlide--;
						} else if (diff < 0 && currentSlide < productData.images.length - 1) {
							// 向左滑动，下一页
							currentSlide++;
						}
					}

					updateSlider();
					sliderTrack.style.transition = 'transform 0.3s ease';
				});
			}

			// 更新轮播位置
			function updateSlider() {
				sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;

				// 更新指示点
				indicators.forEach((indicator, index) => {
					if (index === currentSlide) {
						indicator.classList.add('active');
					} else {
						indicator.classList.remove('active');
					}
				});
			}

			// 切换详情标签
			function switchTab(index) {
				const tabs = document.querySelectorAll('.tab');
				tabs.forEach(tab => tab.classList.remove('active'));
				tabs[index].classList.add('active');

				// 在实际应用中，这里会根据标签切换显示不同的内容
			}

			// 显示规格选择弹窗
			function showSpecModal() {
				document.getElementById('overlay').classList.add('active');
				document.getElementById('specModal').classList.add('active');
			}

			// 隐藏规格选择弹窗
			function hideSpecModal() {
				document.getElementById('overlay').classList.remove('active');
				document.getElementById('specModal').classList.remove('active');
			}

			// 选择规格
			function selectSpec(element) {
				// 移除同组其他选项的选中状态
				const parent = element.parentElement;
				const siblings = parent.querySelectorAll('.spec-option');
				siblings.forEach(sibling => sibling.classList.remove('selected'));

				// 选中当前选项
				element.classList.add('selected');
			}

			// 改变数量
			function changeQuantity(change) {
				const input = document.getElementById('quantityInput');
				let value = parseInt(input.value) + change;

				if (value < 1) value = 1;
				if (value > 99) value = 99;

				input.value = value;
			}

			// 加入购物车
			function addToCart() {
				const selectedSpecs = document.querySelectorAll('.spec-option.selected');
				const quantity = document.getElementById('quantityInput').value;

				if (selectedSpecs.length < 2) {
					alert('请选择完整的商品规格');
					return;
				}

				alert(`已添加 ${quantity} 件商品到购物车`);
				hideSpecModal();
			}

			// 立即购买
			function buyNow() {
				const selectedSpecs = document.querySelectorAll('.spec-option.selected');
				const quantity = document.getElementById('quantityInput').value;

				if (selectedSpecs.length < 2) {
					alert('请选择完整的商品规格');
					return;
				}

				alert(`立即购买 ${quantity} 件商品`);
				hideSpecModal();
			}

			// 返回上一页
			function goBack() {
				window.history.back();
			}

			// 分享商品
			function shareProduct() {
				alert('分享商品功能');
			}

			// 页面加载完成后初始化
			document.addEventListener('DOMContentLoaded', initSlider);
		</script>
	</body>
</html>
